<template>
  <div>
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-top">
        <span v-if="edit">
          <el-select
            v-model="value1"
            placeholder="选择省份"
            @change="handleChange1"
            style="width:127px;"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            v-model="value2"
            placeholder="选择城市"
            @change="handleChange2"
            style="width:127px;"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            v-model="value3"
            placeholder="选择区县"
            @change="handleChange3"
            style="width:127px;"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <!-- <a href="javascript:;">
            查看我所在地区的优教机构
          </a> -->
        </span>
        <button class="yellow-btn"  @click="dialogFormVisible = true">申请入驻</button>
      </div>
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">热门优教推荐</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="i in 5">//好孩子教育</li>
            </ul>
          </div>
        </div>
        <el-carousel height="158px" trigger="click" arrow="never" :interval="5000">
          <el-carousel-item v-for="item in ad" :key="item">
            <img :src="item.image_url"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="page-right">
        <div class="clearfix" v-loading.body="loading">
          <no-content v-if="!loading && (!list || list.length === 0)" ></no-content>
          <school-card v-for="item in list" :value="item" :key="item.id"></school-card>
        </div>
        <div class="pagination-container">
          <el-pagination
            v-if="list && list.length !== 0"
            :page-size="offset"
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="申请入驻" top="20px" :visible.sync="dialogFormVisible">
      <el-steps :center="true" :align-center="true"  :space="230" :active="active" finish-status="success">
        <el-step title="完善基础信息"></el-step>
        <el-step title="机构认证"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <div v-if="active === 0">
        <el-form :model="form" style="padding: 60px 140px 0 140px;">
          <el-form-item label="机构名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="成立日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.founded"
              type="date"
              placeholder="选择日期"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="教学学段" :label-width="formLabelWidth">
            <el-select v-model="form.section" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="机构简介" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.intro" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="dialogFormVisible = false">取 消</button>
          <button class="common-btn" @click="next">下一步</button>
        </div>
      </div>
      <div v-if="active === 1">
        <div class="progress2">
          <div class="title1">机构认证</div>
          <div class="org-example">
            <div class="img-container">
              <img :src="orgExample"/>
            </div>
            <div class="text">
              <div class="title">参照示例</div>
              <div class="content">
                1、扫描或者将营业执照拍照并上传<br/>
                2、营业图片上文字必须清晰可见<br/>
                3、输入营业制造编号<br/>
                4、上传营业执照图片大小请小于5M<br/>
              </div>
            </div>
          </div>
          <div class="file-upload clearfix">
            <div class="left-title">营业执照认证：</div>
            <div class="right-content">
              <img :src="IDCard"/>
              <button class="common-btn" @click="handleUpload">点击上传</button>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="dialogFormVisible = false">取 消</button>
          <button class="yellow-btn" @click="active--">上一步</button>
          <button class="common-btn" @click="handleConfirm">提交申请</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getOrgList, registerOrg } from 'api/org'
import { getAddress } from 'api/common'
import moment from 'moment'
import SchoolCard from 'views/components/schoolCard'
import pick from 'utils/file/picker'
import orgExample from 'assets/common_images/org-example.png'
import IDCard from 'assets/common_images/IDcard_default.png'

export default {
  name: 'School',
  components: {
    NavBar,
    SchoolCard
  },
  data() {
    return {
      orgExample,
      IDCard,
      list: [],
      ad: [],
      city: '',
      options1: [],
      options2: [],
      options3: [],
      options: [
        { name: '小学', id: 0 },
        { name: '初中', id: 1 },
        { name: '高中', id: 2 },
        { name: '大学', id: 3 }
      ],
      value1: '',
      value2: '',
      value3: '',
      edit: false,
      value: '',
      total: 0,
      page: 1,
      offset: 10,
      dialogFormVisible: false,
      formLabelWidth: '70px',
      form: {
        name: '',
        founded: '',
        section: '',
        address: '',
        intro: ''
      },
      active: 0,
      loading: false
    }
  },
  created() {
    this.fetchAddress(1)
    this.loading = true
    this.$store.dispatch('GetInfo')
    .then(res => {
      const dis = res.info.district
      if (dis && dis.length !== 0) {
        this.city = dis[dis.length - 1].id
        this.value1 = dis[0] ? dis[0].name : ''
        this.value2 = dis[1] ? dis[1].name : ''
        this.value3 = dis[2] ? dis[2].name : ''
      } else {
        this.$message({
          message: '所在城市定位失败，请前往个人中心完善资料',
          type: 'warning'
        })
        this.city = null
      }
      getOrgList({
        city: this.city
      })
      .then(res => {
        this.loading = false
        this.total = res.data.page.last_page * this.offset
        this.list = res.data.org_list
        this.ad = res.data.ad
        this.edit = true
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    fetchAddress(num) {
      getAddress({
        city: this.city
      })
      .then(res => {
        this[`options${num}`] = res.city
      })
      .catch(err => console.log(err))
    },
    fetchData(params = {}) {
      getOrgList({
        city: this.city,
        ...params
      })
      .then(res => {
        // this.total = res.page.last_page
        this.list = res.data.org_list
      })
      .catch(err => console.log(err))
    },
    // 选择省，获取市
    handleChange1(val) {
      this.city = val
      // this.value2 = ''
      this.fetchAddress(2)
      this.fetchData()
    },
    // 选择市，获取区
    handleChange2(val) {
      this.city = val
      // this.value3 = ''
      this.fetchAddress(3)
      this.fetchData()
    },
    // 选择区
    handleChange3(val) {
      this.city = val
      this.fetchData()
    },
    // 分页
    handlePageChange(page) {
      this.page = page
      this.fetchData(page)
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    handleUpload() {
      pick()
      .then(file => {
        console.log(file)
        this.file = file
        this.IDCard = window.URL.createObjectURL(file)
      })
      .catch(err => console.log(err))
    },
    handleConfirm() {
      this.next()
      registerOrg({
        ...this.form,
        // owner_id: this.$store.state.user.uid,
        founded: moment(this.form.founded).format('YYYY-MM-DD'),
        district_id: '4',
        licence_no: '123456789',
        image: this.file
      })
      .then(res => {
        console.log(res)
        this.$message({
          message: '申请成功',
          type: 'success'
        })
      })
      .catch(() => {
        this.$message({
          message: '申请失败',
          type: 'error'
        })
      })
      this.next()
      this.dialogFormVisible = false
      setTimeout(() => this.next(), 0)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
.page-main {
  .page-top{
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 20px;
    .el-select{
      width: 210px;
    }
    .yellow-btn{
      width: 172px;
      float: right;
      margin-right: 20px;
    }
  }
  .page-left {
    margin-right: 30px;
    .xyd-container{
      .xyd-c-content{
        >ul{
          padding: 10px;
          >li{
            line-height: 30px;
          }
        }
      }
    }
  }
  .page-right {
    margin: -10px;
  }
}
.progress2{
  .title1{
    margin-top: 20px;
  }
  .org-example{
    background-color: #eee;
    padding: 30px;
    .img-container{
      display: inline-block;
      vertical-align: middle;
    }
    .text{
      display: inline-block;
      vertical-align: top;
      margin-left: 40px;
      .title{
        color: #333;
        font-size: 16px;
      }
      .content{
        color: #999;
      }
    }
  }
  .file-upload{
    margin: 20px 0;
    .left-title{
      float: left;
    }
    .right-content{
      float: left;
      width: 200px;
      >img,>button{
        width: 100%;
      }
    }
  }
}
</style>

